<!--
 * @Author: LBH 1336709799@qq.com
 * @Date: 2024-11-08 17:47:32
 * @LastEditors: LBH 1336709799@qq.com
 * @LastEditTime: 2024-11-08 21:30:57
 * @FilePath: \06-Bilibili\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 页面顶部 -->
    <div class="header">
        <div class="nav">
            <div class="left">
                <a href="#" class="iconfont Navbar_logo"></a>
            </div>
            <div class="right">
                <a href="#" class="iconfont ic_search_tab"></a>
                <a href="#" class="login">
                    <img src="./images//login.png" alt="">
                </a>
                <a href="#" class="download">
                    <img src="./images//download.png" alt="">
                </a>
            </div>
        </div>
        <!-- 顶部菜单 -->
        <div class="tab">
            <div class="menu">
                <ul>
                    <li class="now"><a href="#">首页</a></li>
                    <li><a href="#">动画</a></li>
                    <li><a href="#">番剧</a></li>
                    <li><a href="#">国创</a></li>
                    <li><a href="#">音乐</a></li>
                    <li><a href="#">舞蹈</a></li>
                </ul>
            </div>
            <a href="#" class="more">
                <div class="iconfont general_pulldown_s"></div>
            </a>
        </div>     
    </div>

    <!-- 内容 -->
    <div class="content">
        <!-- 视频列表 -->
        <div class="list">
            <a href="#" class="item">
                <div class="card">
                    <img src="./images/ick.jpg" alt="">
                    <div class="count">
                        <p>
                            <div class="iconfont icon_shipin_bofangshu"></div>
                            <span>999</span>万
                        </p>
                        <p>
                            <div class="iconfont icon_shipin_danmushu"></div>
                            <span>10</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">“这个时代的动漫总能让人热泪盈眶...”#动漫推荐#动漫混剪#二次元</p>
            </a>
            <a href="#" class="item">
                <div class="card">
                    <img src="./images/ick1.jpg" alt="">
                    <div class="count">
                        <p>
                            <div class="iconfont icon_shipin_bofangshu"></div>
                            <span>999</span>万
                        </p>
                        <p>
                            <div class="iconfont icon_shipin_danmushu"></div>
                            <span>10</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">“这个时代的动漫总能让人热泪盈眶...”#动漫推荐#动漫混剪#二次元</p>
            </a>
            <a href="#" class="item">
                <div class="card">
                    <img src="./images/ick2.jpg" alt="">
                    <div class="count">
                        <p>
                            <div class="iconfont icon_shipin_bofangshu"></div>
                            <span>999</span>万
                        </p>
                        <p>
                            <div class="iconfont icon_shipin_danmushu"></div>
                            <span>10</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">“这个时代的动漫总能让人热泪盈眶...”#动漫推荐#动漫混剪#二次元</p>
            </a>
            <a href="#" class="item">
                <div class="card">
                    <img src="./images/lena.png" alt="">
                    <div class="count">
                        <p>
                            <div class="iconfont icon_shipin_bofangshu"></div>
                            <span>999</span>万
                        </p>
                        <p>
                            <div class="iconfont icon_shipin_danmushu"></div>
                            <span>10</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">“这个时代的动漫总能让人热泪盈眶...”#动漫推荐#动漫混剪#二次元</p>
            </a>
            <a href="#" class="item">
                <div class="card">
                    <img src="./images/miku.jpg" alt="">
                    <div class="count">
                        <p>
                            <div class="iconfont icon_shipin_bofangshu"></div>
                            <span>999</span>万
                        </p>
                        <p>
                            <div class="iconfont icon_shipin_danmushu"></div>
                            <span>10</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">“这个时代的动漫总能让人热泪盈眶...”#动漫推荐#动漫混剪#二次元</p>
            </a>
            <a href="#" class="item">
                <div class="card">
                    <img src="./images/saber.jpg" alt="">
                    <div class="count">
                        <p>
                            <div class="iconfont icon_shipin_bofangshu"></div>
                            <span>999</span>万
                        </p>
                        <p>
                            <div class="iconfont icon_shipin_danmushu"></div>
                            <span>10</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">“这个时代的动漫总能让人热泪盈眶...”#动漫推荐#动漫混剪#二次元</p>
            </a>
            <a href="#" class="item">
                <div class="card">
                    <img src="./images/xinlena.jpg" alt="">
                    <div class="count">
                        <p>
                            <div class="iconfont icon_shipin_bofangshu"></div>
                            <span>999</span>万
                        </p>
                        <p>
                            <div class="iconfont icon_shipin_danmushu"></div>
                            <span>10</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">“这个时代的动漫总能让人热泪盈眶...”#动漫推荐#动漫混剪#二次元</p>
            </a>
            <a href="#" class="item">
                <div class="card">
                    <img src="./images/eightysix.jpg" alt="">
                    <div class="count">
                        <p>
                            <div class="iconfont icon_shipin_bofangshu"></div>
                            <span>999</span>万
                        </p>
                        <p>
                            <div class="iconfont icon_shipin_danmushu"></div>
                            <span>10</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">“这个时代的动漫总能让人热泪盈眶...”#动漫推荐#动漫混剪#二次元</p>
            </a>
            <a href="#" class="item">
                <div class="card">
                    <img src="./images/miku2.png" alt="">
                    <div class="count">
                        <p>
                            <div class="iconfont icon_shipin_bofangshu"></div>
                            <span>999</span>万
                        </p>
                        <p>
                            <div class="iconfont icon_shipin_danmushu"></div>
                            <span>10</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">“这个时代的动漫总能让人热泪盈眶...”#动漫推荐#动漫混剪#二次元</p>
            </a>
            <a href="#" class="item">
                <div class="card">
                    <img src="./images/btfly.png" alt="">
                    <div class="count">
                        <p>
                            <div class="iconfont icon_shipin_bofangshu"></div>
                            <span>999</span>万
                        </p>
                        <p>
                            <div class="iconfont icon_shipin_danmushu"></div>
                            <span>10</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">“这个时代的动漫总能让人热泪盈眶...”#动漫推荐#动漫混剪#二次元</p>
            </a>
            <a href="#" class="item">
                <div class="card">
                    <img src="./images/rexue.png" alt="">
                    <div class="count">
                        <p>
                            <div class="iconfont icon_shipin_bofangshu"></div>
                            <span>999</span>万
                        </p>
                        <p>
                            <div class="iconfont icon_shipin_danmushu"></div>
                            <span>10</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">“这个时代的动漫总能让人热泪盈眶...”#动漫推荐#动漫混剪#二次元</p>
            </a>
            <a href="#" class="item">
                <div class="card">
                    <img src="./images/jijie.jpg" alt="">
                    <div class="count">
                        <p>
                            <div class="iconfont icon_shipin_bofangshu"></div>
                            <span>999</span>万
                        </p>
                        <p>
                            <div class="iconfont icon_shipin_danmushu"></div>
                            <span>10</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">“这个时代的动漫总能让人热泪盈眶...”#动漫推荐#动漫混剪#二次元</p>
            </a>
        </div>
    </div>

    <div class="btn">
        <a href="#">
            <div class="iconfont Navbar_logo"></div>
            <span>打开App,看你感兴趣的视频</span>
        </a>
    </div>
</body>
</html>